<template>
    <div class="wrapper">

        <!-- header部分 -->
        <header>
            <a @click="goToHome" class="back-button">
                <i class="fa fa-arrow-left"></i> 返回
            </a>
            <p>商家管理页面</p>
        </header>

        <!-- 商家logo部分 -->
        <div class="business-logo">
            <img :src="business.businessImg">
        </div>

        <!-- 商家信息部分 -->
        <div class="business-info">
            <h1>{{ business.businessName }}</h1>
            <p>&#165;{{ this.toFixed2(business.starPrice) }}起送 &#165;{{ this.toFixed2(business.deliveryPrice) }}配送</p>
            <p>{{ business.businessExplain }}</p>
        </div>

        <!-- 食品列表部分 -->
        <ul class="food">
            <li v-for="(item, index) in foodArr">
                <div class="food-left">
                    <img :src="item.foodImg">
                    <div class="food-left-info">
                        <h3>{{ item.foodName }}</h3>
                        <p>{{ item.foodExplain }}</p>
                        <p>&#165;{{ item.foodPrice }}</p>
                    </div>
                </div>
                <div class="food-right">
                    <div>
                        <i class="fa fa-trash-o" @click="removeFood(item.foodId)"></i>
                    </div>
                    <div>
                        <i class="fa fa-pencil-square-o" @click="this.editFood(item.foodId)"></i>
                    </div>
                </div>
            </li>
        </ul>
        <!-- 新增地址部分 -->
        <div class="addbtn" @click="add">
            <i class="fa fa-plus-circle"></i>
            <p>新增菜品</p>
        </div>
        <div style="height: 0.1vw;"></div>
    </div>
    <CustomAlert ref="customAlert" />
</template>

<script>
import CustomAlert from '../components/CustomAlert.vue';
import BigNumber from 'bignumber.js';

export default {
    name: 'BusinessManagement',
    data() {
        return {
            businessId: this.$route.query.businessId,
            business: {},
            foodArr: [],
            user: {},
        }
    },
    components: {
        CustomAlert
    },
    created() {
        this.user = this.$getSessionStorage('user');

        //根据businessId查询商家信息
        this.$axios.get(`Businesses/businessId/${this.businessId}`
        ).then(response => {
            this.business = response.data;
        }).catch(error => {
            console.error(error);
        });

        //根据businessId查询所属食品信息
        this.$axios.get(`Foods/businessId/${this.businessId}`)
            .then(response => {
                this.foodArr = response.data;
                for (let i = 0; i < this.foodArr.length; i++) {
                    this.foodArr[i].quantity = 0;
                }

            }).catch(error => {
                console.error(error);
            });
    },
    methods: {
        navigateTo(url) {
            // 导航到指定页面
            window.location.href = url;
        },
        goToHome() {
            this.navigateTo('/myPage');
        },
        listFoodByBusinessId() {
            //查询商品
            this.$axios.get(`Foods/businessId/${this.businessId}`)
                .then(response => {
                    this.foodArr = response.data;
                }).catch(error => {
                    console.error(error);
                });
        },
        toFixed2(price) {
            return new BigNumber(price).toFixed(2);
        },
        add() {
            this.$router.push({ path: '/addFood', query: { businessId: this.businessId } });
        },
        removeFood(foodId) {
            if (!confirm('确认要删除此商品吗？')) {
                return;
            }

            this.$axios.delete(`Foods/foodId/${foodId}/businessId/${this.businessId}`)
                .then(response => {
                    if (response.data > 0) {
                        let foodArr = this.$getLocalStorage(this.businessId);
                        if (foodArr != null && foodArr.foodId == foodId) {
                            this.$removeLocalStorage(this.businessId);
                        }
                        this.listFoodByBusinessId();
                    } else {
                        this.$refs.customAlert.showAlert('删除商品失败！');
                    }
                }).catch(error => {
                    console.error(error);
                });
        },
        editFood(FoodId) {
            console.log(FoodId);
            this.$router.push({ path: '/editFood', query: { businessId: this.businessId, foodId: FoodId } });
        }
    },
    computed: {

    }
}
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
    width: 100%;
    height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;

    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;

    display: flex;
    justify-content: center;
    align-items: center;
}

.back-button {
    position: absolute;
    top: 3.5vw;
    /* 使用相对单位 */
    left: 2.5vw;
    /* 使用相对单位 */
    font-size: 4vw;
    /* 使用相对单位 */
    text-decoration: none;
    color: white;
    display: flex;
    align-items: center;
}

.back-button i {
    margin-right: 1vw;
    /* 使用相对单位 */
}

/* 针对大屏幕 (如 iPad) 的媒体查询 */
@media (min-width: 768px) {
    .wrapper header {
        height: 8vh;
        /* 使用相对高度单位 */
        font-size: 3vh;
    }

    .back-button {
        top: 2.5vh;
        /* 使用相对高度单位 */
        left: 2vh;
        font-size: 2.5vh;
        /* 相对大小单位 */
    }

    .back-button {
        position: absolute;
        top: 3.5vw;
        /* 使用相对单位 */
        left: 2.5vw;
        /* 使用相对单位 */
        font-size: 4vw;
        /* 使用相对单位 */
        text-decoration: none;
        color: white;
        display: flex;
        align-items: center;
    }

    .back-button i {
        margin-right: 1vw;
        /* 使用相对单位 */
    }

    /* 针对大屏幕 (如 iPad) 的媒体查询 */
    @media (min-width: 768px) {
        .wrapper header {
            height: 8vh;
            /* 使用相对高度单位 */
            font-size: 3vh;
        }

        .back-button {
            top: 2.5vh;
            /* 使用相对高度单位 */
            left: 2vh;
            font-size: 2.5vh;
            /* 相对大小单位 */
        }

        .back-button i {
            margin-right: 0.5vh;
        }
    }

    /****************** 商家logo部分 ******************/
    .wrapper .business-logo {
        width: 100%;
        height: 35vw;
        /*使用上外边距避开header部分*/
        margin-top: 12vw;

        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/****************** 商家logo部分 ******************/
.wrapper .business-logo {
    width: 100%;
    height: 35vw;
    /*使用上外边距避开header部分*/
    margin-top: 12vw;

    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper .business-logo img {
    width: 40vw;
    height: 30vw;
    border-radius: 5px;
}

/****************** 商家信息部分 ******************/
.wrapper .business-info {
    width: 100%;
    height: 20vw;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.wrapper .business-info h1 {
    font-size: 5vw;
}

.wrapper .business-info p {
    font-size: 3vw;
    color: #666;
    margin-top: 1vw;
}

/****************** 食品列表部分 ******************/
.wrapper .food {
    width: 100%;
    /*使用下外边距避开footer部分*/
    margin-bottom: 14vw;
}

.wrapper .food li {
    width: 100%;
    box-sizing: border-box;
    padding: 2.5vw;
    user-select: none;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrapper .food li .food-left {
    display: flex;
    align-items: center;
}

.wrapper .food li .food-left img {
    width: 20vw;
    height: 20vw;
}

.wrapper .food li .food-left .food-left-info {
    margin-left: 3vw;
}

.wrapper .food li .food-left .food-left-info h3 {
    font-size: 3.8vw;
    color: #555;
}

.wrapper .food li .food-left .food-left-info p {
    font-size: 3vw;
    color: #888;
    margin-top: 2vw;
}

.wrapper .food li .food-right {
    width: 16vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrapper .food li .food-right .fa-minus-circle {
    font-size: 5.5vw;
    color: #999;
    cursor: pointer;
}

.wrapper .food li .food-right p {
    font-size: 3.6vw;
    color: #333;
}

.wrapper .food li .food-right .fa-plus-circle {
    font-size: 5.5vw;
    color: #0097EF;
    cursor: pointer;
}

/****************** 购物车部分 ******************/
.wrapper .cart {
    width: 100%;
    height: 14vw;

    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
    z-index: 1003;
}

.wrapper .cart .cart-left {
    flex: 2;
    background-color: #505051;
    display: flex;
}

.wrapper .cart .cart-left .cart-left-icon {
    width: 16vw;
    height: 16vw;
    box-sizing: border-box;
    border: solid 1.6vw #444;
    border-radius: 8vw;
    background-color: #3190E8;
    font-size: 7vw;
    color: #fff;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: -4vw;
    margin-left: 3vw;

    position: relative;
}

.wrapper .cart .cart-left .cart-left-icon-quantity {
    width: 5vw;
    height: 5vw;
    border-radius: 2.5vw;
    background-color: red;
    color: #fff;
    font-size: 3.6vw;

    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    right: -1.5vw;
    top: -1.5vw;
}

.wrapper .cart .cart-left .cart-left-info p:first-child {
    font-size: 4.5vw;
    color: #fff;
    margin-top: 1vw;
}

.wrapper .cart .cart-left .cart-left-info p:last-child {
    font-size: 2.8vw;
    color: #AAA;
}

.wrapper .cart .cart-right {
    flex: 1;
}

/*达到起送费时的样式*/
.wrapper .cart .cart-right .cart-right-item {
    width: 100%;
    height: 100%;
    background-color: #38CA73;
    color: #fff;
    font-size: 4.5vw;
    font-weight: 700;
    user-select: none;
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* 购物车明细部分 */
.cart-details {
    position: fixed;
    bottom: 16vw;
    left: 0;
    width: 100%;
    background-color: #f5fafe;
    border-top: 1px solid #ccc;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1002;
    border-radius: 10px 10px 0 0;
    /* 增加圆角 */
    overflow: hidden;
    /* 防止内容超出圆角 */
    transition: transform 0.3s ease-in-out;
    /* 增加动画效果 */
}

.cart-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cart-details li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 0px;
    transition: background-color 0.3s ease-in-out;
    /* 增加动画效果 */
}

.cart-details li:hover {
    background-color: #f9f9f9;
    /* 增加悬停效果 */
}

.cart-details .food-left-info h3 {
    font-size: 4vw;
    color: #555;
    font-weight: 600;
    /* 增加字体粗细 */
}

.cart-details .food-left-info p {
    font-size: 3vw;
    color: #333;
    margin-top: 1vw;
}

.cart-details .food-right {
    display: flex;
    align-items: center;
}

.cart-details .food-right .fa-plus-circle {
    font-size: 5vw;
    color: #0097EF;
    cursor: pointer;
    transition: color 0.3s ease-in-out;
    /* 增加动画效果 */
}

.cart-details .food-right .fa-plus-circle:hover {
    color: #007acc;
    /* 增加悬停效果 */
}

.cart-details .food-right .fa-minus-circle {
    font-size: 5vw;
    color: #999;
    cursor: pointer;
    transition: color 0.3s ease-in-out;
    /* 增加动画效果 */
}

.cart-details .food-right .fa-minus-circle:hover {
    color: #666;
    /* 增加悬停效果 */
}

.cart-details .food-right p {
    margin: 0 15px;
    color: #434040;
    font-size: 3.5vw;
    font-weight: 500;
    /* 增加字体粗细 */
}

/*************** 新增地址部分 ***************/
.wrapper .addbtn {
    width: 100%;
    height: 14vw;
    border-top: solid 1px #DDD;
    border-bottom: solid 1px #DDD;
    background-color: #fff;
    margin-top: 4vw;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 4.5vw;
    color: #0097FF;
    user-select: none;
    cursor: pointer;
}

.wrapper .addbtn p {
    margin-left: 2vw;
}
</style>